<template>
    <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem :to="`/category/${category.top.id}`">{{category.top.name}}</XtxBreadItem>
        <Transition name="fade-right" mode="out-in">
            <XtxBreadItem :to="`/category/sub/${category.sub.id}`" :key="category.sub.id">{{category.sub.name}}</XtxBreadItem>
        </Transition>
    </XtxBread>
</template>

<script>
    import { computed } from 'vue'
    import { useRoute } from 'vue-router'
    import { useStore } from 'vuex'
    export default {
        name: 'SubBread',
        setup() {
            const store = useStore()
            const route = useRoute()
            const category = computed(() => {
                const obj = {}
                store.state.category.categoryList.forEach(top => {
                    top.children && top.children.forEach(sub => {
                        if (sub.id === route.params.id) {
                            // 设置二级类目
                            obj['sub'] = { id: sub.id, name: sub.name }
                            // 设置一级类目
                            obj['top'] = { id: top.id, name: top.name }
                        }
                    })
                });
                return obj
            })
            return {
                category
            }
        }

    }
</script>

<style>

</style>